import styled from "styled-components";

import songPlayBgImg from '../../assets/images/songPlayingBg.png'
export const PlayerBox = styled.div`
  height: 1130px;
  position: relative;
  background-color: rgba(0,0,0.7);
  .PlayerBox_bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url("https://y.qq.com/music/photo_new/T002R300x300M0000027XGwP1zGhdy.jpg?max_age=2592000"); */
    background-image: url(${props => props.bg});
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(18px);
    opacity: .4;
  }
/* opacity: .6; */
  .main{
    position: relative;
    z-index: 2;
    margin:  0 auto;
    width: 1736px;
    /* min-width: 1200px; */
    /* width: 1400px; */
    height: 700px;
    /* background-color: bisque; */
    .main_content{
      display: flex;
      padding-top: 60px;
      .main_content_left{
        width: 1300px;
        .main_content_left_anniu{
          display: flex;
          font-size: 14px;
          >div{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            width: 122px;
            height: 38px;
            border-color: hsla(0,0%,100%,.2);
            border-style: solid;
            border-width: 1px;
            border-radius: 5px;
            color: #ffffff;
            opacity: .7;
            transition: all .4s;
            .anticon{
              font-size: 18px;
            }
            &:hover{
              cursor: pointer;
              border-color: #ffffff;
              opacity: 1;
            }
            .anticon{
              margin-right: 5px;
            }
          }
        }
        .main_content_left_list{
          padding-top: 30px;
          
          .main_content_left_list_item{
            height: 50px;
            color: #bdbdbe;
            display: flex;
            align-items: center;
            font-size: 14px;
            .main_content_left_list_nanniu{
              display: flex;
              align-items: center;
              width: 80px;
              .iconfont{
                margin-right: 10px;
              }
              /* img{
                margin-right: 10px;
              } */
              .main_content_left_list_nanniu_img{
                width: 10px;
                height: 24px;
                margin-right: 10px;
              }
            }
            .main_content_left_list_name{
              position: relative;
              width: 770px;
              height: 50px;
              line-height: 50px;
              cursor: pointer;
              &:hover{
                /* color: #ffffff; */
                .main_content_left_list_name_title{
                  color: #ffffff;
                }
                .main_content_left_list_name_anniu{
                  opacity: 1;
                  
                }
              }
              .main_content_left_list_name_anniu{
                position: absolute;
                top: 0;
                right: 0;
                width: 64px;
                height: 50px;
                opacity: 0;
                transition: all .4s;
                /* background-color: red; */
                /* 覆盖 iconfont 的样式 */
                .anticon{
                  font-size: 20px;
                  margin-right: 8px;
                  &:hover{
                    color: #ffffff;
                  }
                }
              }
            }
            .main_content_left_list_author{
              width: 300px;
            }
            .main_content_left_list_time{
              width: 150px;
            }
          }

          .gundongtiao::-webkit-scrollbar {
            /*滚动条整体样式*/
            width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
            }
          .gundongtiao::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius   : 10px;
            background-color: rgba(246, 246, 246,0.3);
            
            

          }
          .gundongtiao::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            /* background   : #ededed; */
            border-radius: 10px;
          }
        }
      }
      .main_content_right{
        width: 436px;
        padding-top: 78px;
        .bg{
          width: 201px;
          height: 186px;
          background-color: red;
          margin: 0 auto;
          margin-bottom: 30px;
          background: url(${songPlayBgImg}) no-repeat;
          img{
            width: 177px;
            height: 186px;
          }
        }
        .name,.author{
          font-size: 14px;
          color: #e1e1e1cc;
          text-align: center;
          margin-bottom: 10px;
          &:hover i{
            color: #ffffff;
            cursor: pointer;
          }
        }
        .gecigundong{
          overflow: hidden;
          height: 500px;
          width: 370px;
          /* background-color: red; */
          margin: 60px auto 0;
          text-align: center;
          p{
            margin-bottom: 0;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
            color: #e1e1e1cc;
            &.active{
              color: #3ac27c;
            }
          }
          .gecigundongBox{
            transition: all .2s ease-out 0s;
          }
        }
      }
    }


    // 底部控制栏
    .main_footer{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      height: 60px;
      /* background-color: #000; */
      
      .control{
        height: 100%;
        display: flex;
        align-items: center;
        color: #ffffff;
        
      }
      .progressBox{
        display: flex;
        height: 100%;
        justify-content: center;
        flex-direction: column;
        /* margin-left: 100px; */
        width: 1200px;
        /* background-color: red; */
        .progressBox_info{
          display: flex;
          justify-content: space-between;
          color: hsla(0,0%,88.2%,.8);
          font-size: 14px;
          .progressBox_info_name{
            a{
              color: hsla(0,0%,88.2%,.8);
            }
            i{
              margin: 0 10px;
            }
          }
          .progressBox_info_time{
            i{
              margin: 0 10px;
            }
          }
        }

        /* 进度条 */
        .progressBox_progress{
          /* 覆盖 antd 本身的样式 */
          .ant-slider-rail{
            background-color: hsla(0,0%,88.2%,.8);
          }
          .ant-slider-track{
            background-color: #3ac27c;
          }
          .ant-slider-handle{
            border-color: #3ac27c;
          }
             
        }
        
      }
    }

    /* 其他的，列表循环 随机 单曲  评论 */
    .other{
      margin-left: 30px;
      color: #ffffff;
      i {
        font-size: 30px;
        margin-right: 20px;
        &:nth-child(3){
          margin-right: 10px;
        }
      }
    }
    .yinliang{
      /* display: flex; */
      width: 80px;
      .ant-slider-rail{
        background-color: hsla(0,0%,88.2%,.8);
      }
      .ant-slider-track{
        background-color: #3ac27c;
      }
      .ant-slider-handle{
        border-color: #3ac27c;
      }
    }

  }

`